<template>
  <div class="dashboard-editor-container">
    <el-select class="filter-item" v-model="whereQuery.did" clearable filterable remote placeholder="请输入设备编号" :remote-method="remoteMethod" @change="handleFilter" :loading="deviceLoading">
      <el-option v-for="item in deviceOptions" :key="item.id" :label="item.number" :value="item.id">
        <span style="float: left">{{ item.name }}</span>
        <!--<span style="float: center">{{ item.number }}</span>-->
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.status | statusFilter }}</span>
      </el-option>
    </el-select>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>昨日和今日应用启动次数</span>
      <line-chart :chart-data="appOpenChartData"></line-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>昨日和今日设备总点击次数</span>
      <line-chart :chart-data="motionChartData"></line-chart>
    </el-row>
  </div>
</template>
<script>
import LineChart from '../components/twoDayChart'
import { getAllAppOpenData, getAllMotionData, listDevice } from '@/api/monitor'

export default {
  components: {
    LineChart
  },

  data() {
    return {
      whereQuery: {
        did: undefined
      },
      deviceLoading: false,
      deviceOptions: [],
      listDeviceQuery: {
        page: 0,
        size: 10,
        number: undefined
      },
      appOpenChartData: {
        days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
        todayData: [],
        yesterdayData: []
      },
      motionChartData: {
        days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
        todayData: [],
        yesterdayData: []
      }
    }
  },
  created() {
    this.getTwoDayData()
  },
  filters: {
    statusFilter(type) {
      const types = ['待发出', '已发出', '已激活', '已回收', '已报废', '其他']
      return type > 0 ? types[type - 1] : ''
    }
  },
  methods: {
    remoteMethod(keyword) {
      if (this.deviceLoading) {
        return
      }
      if (keyword !== '') {
        this.deviceLoading = true
        setTimeout(() => {
          this.deviceLoading = false
          this.listDeviceQuery.number = keyword
          listDevice(this.listDeviceQuery).then(response => {
            this.deviceOptions = response.data.data.result
          })
        }, 200)
      } else {
        this.deviceOptions = []
      }
    },
    handleFilter() {
      this.getTwoDayData()
    },
    getTwoDayData() {
      var appOpenParams = {
        type: 3,
        filter: false,
        particle: 2
      }
      var motionParams = {
        type: 3,
        particle: 2
      }
      if (this.whereQuery.did !== undefined) {
        appOpenParams.did = this.whereQuery.did
        motionParams.did = this.whereQuery.did
      }
      getAllAppOpenData(appOpenParams).then(response => {
        const result = response.data
        var now = new Date()
        const todayKey = this.getDateFormat(now, 'yyyy-MM-dd')
        now.setDate(now.getDate() - 1)
        const yesterdayKey = this.getDateFormat(now, 'yyyy-MM-dd')
        const today = result[todayKey] === undefined ? {} : result[todayKey]
        const yesterday = result[yesterdayKey] === undefined ? {} : result[yesterdayKey]
        this.appOpenChartData.todayData.splice(0, this.appOpenChartData.todayData.length)
        this.appOpenChartData.yesterdayData.splice(0, this.appOpenChartData.yesterdayData.length)
        for (var i = 1; i <= 24; i++) {
          this.appOpenChartData.yesterdayData.push(yesterday[i.toString()] === undefined ? 0 : yesterday[i.toString()])
          this.appOpenChartData.todayData.push(today[i.toString()] === undefined ? 0 : today[i.toString()])
        }
      })

      getAllMotionData(motionParams).then(response => {
        const result = response.data
        var now = new Date()
        const todayKey = this.getDateFormat(now, 'yyyy-MM-dd')
        now.setDate(now.getDate() - 1)
        const yesterdayKey = this.getDateFormat(now, 'yyyy-MM-dd')
        const today = result[todayKey] === undefined ? {} : result[todayKey]
        const yesterday = result[yesterdayKey] === undefined ? {} : result[yesterdayKey]
        this.motionChartData.todayData.splice(0, this.motionChartData.todayData.length)
        this.motionChartData.yesterdayData.splice(0, this.motionChartData.yesterdayData.length)
        for (var i = 1; i <= 24; i++) {
          this.motionChartData.yesterdayData.push(yesterday[i.toString()] === undefined ? 0 : yesterday[i.toString()])
          this.motionChartData.todayData.push(today[i.toString()] === undefined ? 0 : today[i.toString()])
        }
      })
    },
    getDateFormat(date, fmt) {
      var o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 30px;
  background-color: rgb(240, 242, 245);
.chart-wrapper {
    background: #fff;
    padding: 15px 15px 0;
  }
}
</style>
